<template>
    <div class="projectProgressContent">
        <img src="@/assets/bigScreen/icons/center/center_bg.png" alt="">
        <div class="titles_moduls">
            <img src="@/assets/bigScreen/icons/left/gjtj.png" alt="">
            工程进度
        </div>

        <div class="center_top_content">
            <div class="left_day">
                <img src="@/assets/bigScreen/icons/center/dayNum.png" alt="">
                <span :class="`${data.length < 4 ? 'num' : 'nums'} ${data.length < 4 ? 'num' : 'nums'}${index + 1}`"
                    v-for="(item, index) in data" :key="index">
                    <img src="@/assets/bigScreen/icons/center/numBor.png" alt="">
                    <span>{{ item }}</span>
                    <!-- <count-to :startVal="0" :endVal="item" :duration="4000" ></count-to> -->
                </span>
                <div>已施工（天）</div>
            </div>
            <div class="lines"></div>
            <div class="progress">
                <div class="progress_top">
                    <swiper :options="swiperOptions">
                        <swiper-slide v-for="(item, index) in pointData" :key="index + '_time'"
                            :style="(index + 1) == pointData.length ? 'width:3.90625vw !important;margin-right: 0%;' : ''">
                            <!-- <div class="progress_point_jd"  :style="(index + 1) == pointData.length ? 'width:3.90625vw !important;margin-right: 0%;' : ''"> -->
                            <div class="progress_point">
                                <div class="time">
                                    <img :src="require(`@/assets/bigScreen/icons/center/${index == 2 ? 'jd_des_ac' : 'jd_des'}.png`)"
                                        alt="">
                                    <span>{{ item.startWorkDate }}</span>
                                </div>
                                <div class="names">
                                    <img :src="require(`@/assets/bigScreen/icons/center/${index == 2 ? 'jd_ac' : 'jd'}.png`)"
                                        alt="">
                                    <span>{{ item.engineeringType }}</span>
                                </div>
                            </div>
                            <div class="progress_point_day_num" v-if="(index + 1) != pointData.length">
                                <img src="@/assets/bigScreen/icons/center/jd_des_dashad.png" alt="">
                                <div class="time">{{ item.constructionDays }}天</div>
                            </div>
                            <!-- </div> -->
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="progress_bottom">
                    <img src="@/assets/bigScreen/icons/center/jdt.png" alt="">
                    <div class="progress-bar" :style="{ width: progresss + '%' }"></div>
                </div>
            </div>
        </div>
        <div class="center_bottom_content">
            <flowChart />
        </div>
    </div>
</template>

<script>

import flowChart from "../flowChart/index.vue";
import { getProjectProgress } from "@/api/bigScreen/home.js";
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';


import CountTo from 'vue-count-to'

 


export default {
    components: {
        flowChart,
        Swiper,
        SwiperSlide,
        CountTo
    },
    data() {
        return {
            data: [2, 5, 2],
            progress: 0,
            progresss: 0,
            currentNode: 3,
            pointData: [
                {
                    engineeringType: '打孔',
                    startWorkDate: '2024-02-22',
                    constructionDays: '2222'
                }, {
                    engineeringType: '冻结',
                    startWorkDate: '2024-02-22',
                    constructionDays: '2222'
                }, {
                    engineeringType: '矿建',
                    startWorkDate: '2024-02-22',
                    constructionDays: '2222'
                }, {
                    engineeringType: '测试',
                    startWorkDate: '2024-02-22',
                    constructionDays: '2222'
                }, {
                    engineeringType: '竣工',
                    startWorkDate: '2024-02-22',
                    constructionDays: '2222'
                }
            ],
            swiperOptions: {
                slidesPerView: 'auto',
                slidesPerGroup: 1,
            }

        };
    },
    mounted() {
        this.progresss = 66
        this.getData()
    },
    methods: {
        getData() {
            getProjectProgress().then(res => {
                let is = res.data.constructionAllDays
                is = is > 0 && is < 10 ? '00' + is : is > 9 && is < 100 ? '0' + is : is
                this.data = (is + '').split('') || [0, 0, 1]
                this.pointData = res.data.engineeringTypeList
            })
        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.projectProgressContent {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }

    ::v-deep .swiper-container {
        margin: 0;
        width: 100%;
    }



    .titles_moduls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: .8%;
        left: 1.5%;

        img {
            width: 1.2vw;
            margin-right: 0.5208vw;
        }


        font-size: 0.8333vw;
        font-weight: 400;
        letter-spacing: 0.0208vw;
        font-family: kk;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;

    }

    .center_top_content {
        width: 100%;
        position: absolute;
        top: 6%;
        left: 0;

        .left_day {
            width: 25%;
            position: absolute;
            left: 1%;

            img {
                width: 100%;
            }

            .num {
                display: block;
                position: absolute;
                font-size: 1.5625vw;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                font-family: kk;

                img {
                    width: 2.5vw;
                }

                span {
                    position: absolute;
                    left: 32%;
                    top: 12%;
                }
            }

            .num1 {
                left: 15%;
                top: 20%;
            }

            .num2 {
                left: 40%;
                top: 20%;
            }

            .num3 {
                left: 64%;
                top: 20%;
            }

            .nums {
                display: block;
                position: absolute;
                font-size: 1.5625vw;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                font-family: kk;

                img {
                    width: 2vw;
                }

                span {
                    position: absolute;
                    left: 25%;
                    top: 6%;
                }
            }

            .nums1 {
                left: 12%;
                top: 24%;
            }

            .nums2 {
                left: 32%;
                top: 24%;
            }

            .nums3 {
                left: 52%;
                top: 24%;
            }

            .nums4 {
                left: 72%;
                top: 24%;
            }

            div {
                font-size: 1.0417vw;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                text-align: center;

            }
        }

        .lines {
            width: 0px;
            height: 7.8125vw;
            position: absolute;
            left: 27%;
            top: 10%;
            border-left: 1px solid;
            border-right: 1px solid;
            border-image: linear-gradient(to bottom, rgba(48, 148, 255, 0), rgba(49, 147, 255, 1), rgba(49, 147, 255, 0)) 1;

        }

        .progress {
            width: 70%;
            height: 7.8125vw;
            position: absolute;
            right: 1%;

            .progress_top {
                width: 100%;
                height: 6.7708vw;
                display: flex;
                align-items: flex-end;
                justify-content: flex-start; // 确保内容从左对齐
                overflow-x: auto; // 确保水平滚动
                scrollbar-width: none;
                -ms-overflow-style: none;
                white-space: nowrap; // 防止内容换行



                ::v-deep .swiper-slide {
                    width: 8.75vw !important;
                    display: inline-flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    flex-shrink: 0; // 防止 flex 压缩
                    margin-right: 3%;
                    cursor: pointer;

                    .progress_point {
                        width: 3.90625vw;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: flex-end;

                        .time {
                            width: 100%;
                            position: relative;

                            img {
                                width: 100%;
                            }

                            span {
                                display: block;
                                position: absolute;
                                top: 15%;
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                font-size: .625vw;
                                font-weight: 400;
                                color: transparent;
                                background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
                                -webkit-background-clip: text;
                                background-clip: text;
                            }
                        }

                        .names {
                            width: 100%;
                            position: relative;
                            margin-top: 0.5208vw;

                            img {
                                width: 100%;
                            }

                            span {
                                display: block;
                                width: 100%;
                                text-align: center;
                                position: absolute;
                                left: 0;
                                top: 10%;
                                font-size: 0.9375vw;
                                font-weight: 400;
                                color: rgba(255, 255, 255, 1);
                                font-family: kk;
                            }
                        }
                    }

                    .progress_point_day_num {
                        width: 3.90625vw;
                        position: relative;
                        margin-left: 2%;

                        img {
                            width: 100%;
                        }

                        .time {
                            position: absolute;
                            top: 15%;
                            width: 100%;
                            height: 100%;
                            text-align: center;
                            font-size: .625vw;
                            font-weight: 400;
                            color: transparent;
                            background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
                            -webkit-background-clip: text;
                            background-clip: text;
                        }
                    }
                }
            }


            .progress_bottom {
                width: 100%;
                height: 1.0417vw;
                background: #081834;
                position: relative;
                overflow: visible; // 修改 overflow 为 visible
                clip-path: none; // 移除 clip-path

                img {
                    width: 100%;
                }

                .progress-bar {
                    height: 100%;
                    background: linear-gradient(to bottom, rgba(153, 253, 255, 1), rgba(13, 110, 255, 1));
                    border-radius: 0.5208vw;
                    transition: width 0.5s ease;
                    position: absolute;
                    top: 16%;
                    z-index: 9;
                    clip-path: polygon(0.5208vw 0, 0 50%, 0.5208vw 100%, calc(100% - 0.5208vw) 100%, 100% 50%, calc(100% - 0.5208vw) 0);

                    &::before {
                        content: '';
                        position: absolute;
                        right: -4px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1.3021vw;
                        height: 1.3021vw;
                        z-index: 10;
                        background: #fff;
                        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                        box-shadow: 0 0 15px rgba(255, 255, 255, 1);
                    }
                }
            }
        }
    }

    .center_bottom_content {
        width: 100%;
        position: absolute;
        top: 28%;
        left: 0;
    }
}
</style>